<template>
	<view v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'数据统计'}"></header-top>
		<!-- 进度条 -->
		<view>
			<!-- 进度条表头 -->
			<view class="mainpadding flexbetween">
				<view class="strongtext">行业名称</view>
				<view class="selecttime1 selectborder flexcenter radius" @click="showtime(1)">
					<text>{{starthytimeIndustry}}-{{endhytimeIndustry}}</text>
					<view class="timeicon"></view>
				</view>
			</view>
			<!-- 进度条 -->
			<view class="mainpadding2">
				<view class="flexleft widthbfb1 margin_top" v-for="item in industry" :key="item.id">
					<text class="zdytext widthbfb2">{{item.name}}</text>
					<!-- 渐变进度条 -->
					<view class="widthbfb3 flexleft">
						<view class="linear_gradient3 right-radios margin_right" style="width: 60%;"></view>
						<text class="zdytext widthbfb4">{{item.thaliorder_sum}}</text>
					</view>
				</view>
			</view>
		</view>
		<view>
			<view class="mainpadding_top flexbetween">
				<view class="strongtext">客户营销额排名</view>
				<view class="selecttime1 selectborder flexcenter radius" @click="showtime(2)">
					<text>{{starthytime}}-{{endhytime}}</text>
					<view class="timeicon"></view>
				</view>
			</view>
		</view>
		<view class="content_top flexleft margin_bottom">
			<view class="margin_top margin_right6">
				共：<text style="color: #3476fe;">{{list.total}}</text>名
			</view>
			<!-- <view class="margin_top">
				总营业额：<text style="color: green;">{{total_saleorder_sum}}</text>
			</view> -->
		</view>
		<view class="mainpadding2 messagetext" v-for="(item,index) in list.data" :key="item.id">
			<view class="ranktitle">第{{index+1}}名</view>
			<view class="flexbetween margin_top">
				<text>公司名称：{{item.name}}</text>
			</view>
			<view class="margin_top flexbetween">
				<view>姓名：{{item.khname}}</view>
				<view>电话：{{item.tel}}</view>
			</view>
			<view class="margin_top">
				<view class="yihang">地址：{{item.cityinfo}}/{{item.address_detail}}</view>
			</view>
			<!-- <view class="margin_top">
				<view>营业额：{{item.saleorder_sum||0}}</view>
			</view> -->
		</view>
		<u-datetime-picker :show="showStart" mode="date" @cancel="showStart=false"
			@confirm="startConfirm"></u-datetime-picker>
		<u-datetime-picker :show="showEnd" mode="date" @cancel="showEnd=false"
			@confirm="endConfirm"></u-datetime-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				starthytimeIndustry: "开始", //行业筛选开始时间
				endhytimeIndustry: "结束", //行业筛选结束时间
				starthytime: "开始", //营销额筛选开始时间
				endhytime: "结束", //营销额筛选结束时间
				// startkhtime: "开始", //客户营销额开始时间
				// endkhtime: "结束", //客户营销额结束时间
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				pageShow: false,
				showStart: false,
				showEnd: false,
				itemtime: 0,
				industry: [], //行业
				total_saleorder_sum:"",//总营业额
			};
		},
		onLoad() {

		},
		onShow() {
			this.init()
			this.getIndustry()
		},
		methods: {
			init(isPage, page) {
				let _this = this
				httpRequest.request('/employeesapi/shop/shopList1', 'GET', {
					page: page || 1,
					limit: _this.limit,
					start_time: this.starthytime == "开始" ? "" : this.starthytime, //开始时间
					end_time: this.endhytime == "结束" ? "" : this.endhytime, //结束时间
					// yxe_sort: 1, //客户营销额排名
				}).then(res => {
					let resList = res.data.list;
					let dataList = _this.list;
					if (isPage == true) {
						_this.list.data = dataList.data.concat(resList.data);
					} else {
						_this.list = resList
						_this.list.data = resList.data;
					}
					_this.total_saleorder_sum=res.data.total_saleorder_sum
					_this.pageShow = true
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			getIndustry(isPage, page) {
				let _this = this
				httpRequest.request('/employeesapi/user/industrySort', 'GET', {
					start_time: this.starthytimeIndustry == "开始" ? "" : this.starthytimeIndustry, //开始时间
					end_time: this.endhytimeIndustry == "结束" ? "" : this.endhytimeIndustry, //结束时间
				}).then(res => {
					_this.industry = res.data
				})
			},
			date(data) {
				let time = new Date(data);
				let year = time.getFullYear();
				let month = time.getMonth() + 1;
				month = month < 10 ? '0' + month : month
				let day = time.getDate();
				day = day < 10 ? '0' + day : day
				return year + '-' + month + '-' + day
			},
			showtime(i) {
				this.itemtime = i
				this.showStart = true
			},
			startConfirm(e) {
				console.log(this.itemtime)
				console.log(this.date(e.value))
				if (this.itemtime == 1) {
					this.starthytimeIndustry = this.date(e.value)
				} else {
					this.startkhtime = this.date(e.value)
				}
				this.showStart = false
				this.showEnd = true
			},
			endConfirm(e) {
				if (this.itemtime == 1) {
					this.endhytimeIndustry = this.date(e.value)
					this.getIndustry()
				} else {
					this.endkhtime = this.date(e.value)
					this.init()
				}
				this.showEnd = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content_top {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #999999;
		flex-wrap: wrap;
		padding: 0 30rpx;
	}

	.selecttime1 {
		height: 71rpx;
		padding: 0 20rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		background-color: #fff;
	}

	// 顶部筛选项
	.selectborder {
		border: 1rpx solid #999999;
	}

	.smalltext {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	// 第一个条形图图表
	.charts-box {
		width: 100%;
		height: 300rpx;
	}

	.margin_right {
		margin-right: 10rpx;
	}

	.widthbfb1 {
		width: 100%;
	}

	.widthbfb2 {
		width: 20%;
	}

	.widthbfb3 {
		width: 90%;
	}

	.widthbfb4 {
		width: 40%;
	}

	.right-radios {
		border-top-right-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
	}

	.linear_gradient1 {
		height: 31rpx;
		background: linear-gradient(90deg, #FF7777, #FFA4A4);

	}

	.linear_gradient2 {
		height: 31rpx;
		background: linear-gradient(90deg, #FFEB45, #FFF6C5);
	}

	.linear_gradient3 {
		height: 31rpx;
		background: linear-gradient(90deg, #3476fe, #C9DEFF);
	}

	.linear_gradient4 {
		height: 31rpx;
		background: linear-gradient(90deg, #94F85E, #DAFFA0);
	}

	// 第二个图表柱状图
	.charts-box2 {
		width: 100%;
		height: 450rpx;
	}

	.strongtext {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	// 底部内容数据
	.messagetext {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.ranktitle {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.gstext {
		font-size: 26rpx;
	}
</style>